<template>
  <span
    class="pointer"
    :style="dateFormat(sub.deliverydate) < dateFormat(new Date()) ? 'color: #ff0f47;' : ''"
    @click="showpicker"
    >{{ dateFormat(sub.deliverydate) }}</span
  >
  <div class="hidepicker">
    <el-date-picker
      v-model="sub.deliverydate"
      type="date"
      ref="deliveryDateRef"
      placeholder="选择日期"
      @change="updatedevDate"
    >
    </el-date-picker>
  </div>
</template>

<script setup lang="ts">
import { changeDeliveryDate } from '../api/formApi';
import { dateFormat } from '@/utils/dateformat';
import { reactive, toRefs, ref } from 'vue';

const props = defineProps({ sub: {} });
const { sub } = toRefs(props);
const deliveryDateRef = ref();
function showpicker() {
  deliveryDateRef.value.handleOpen();
}
function updatedevDate(val) {
  const times = dateFormat(val);
  const entry = props.sub;
  changeDeliveryDate(entry.id, times);
}
</script>

<style>
.img-40 {
  width: 60px;
  height: 60px;
  flex: none;
  margin-right: 8px;
}
.hidepicker .el-input__wrapper {
  display: none;
}
.hidepicker,
.hidepicker .el-input {
  height: 1px;
  margin-top: -3px;
}
</style>
